<template>
	<view class="nav-tabs">
		<view class="nav-tabs-group">
			<view 
				class="nav-tabs-item" 
				v-for="(value, index) in values" 
				:key="index" :class="{'active': index == currentIndex}">
					<view class="btn" @tap="_onClick(index)">{{ value }}</view>
				</view>
		</view>
	</view>
</template>

<script>
import { queryNearbyMedia, getMediaDetailByMap } from '@/api/configure.js';
import { deepClone, getToken, toLogin, getLocation, moveToLocation, mergeUrls} from '@/util/util.js';
import configUrl from '@/util/url.js';
	
export default {
	name: 'NavTabs',
	props: {
		current: {
			type: Number,
			default: 0
		},
		disabled: {
			type: Boolean,
			default: false
		},
		values: {
			type: Array,
			default () {
				return []
			}
		}
	},
	data() {
		return {
			currentIndex: 0
		}
	},
	methods: {
		_onClick(index) {
			if(this.disabled){
				return ;
			}
			
			if (this.currentIndex !== index) {
				this.$emit('clickItem', {currentIndex:index})
			}
		}
	},
	watch: {
		current(val) {
			if (val !== this.currentIndex) {
				this.currentIndex = val
			}
		}
	},
	created() {
		this.currentIndex = this.current
	}
}
</script>

<style lang="scss" scoped>
	@import '@/uni.scss';
	.nav-tabs{
		.nav-tabs-group{
			border-bottom: 1rpx solid #b1d4f8;
			display: flex;
			.nav-tabs-item{
				width: 33.33%;
				.btn{
					padding: 19rpx 0rpx;
					font-size: 32rpx;
					line-height: 40rpx;
					text-align: center;
					color: #222222;
				}
				&.active{
					.btn{
						color: #ffffff;
						background-image: linear-gradient(to right, #3a8eed, #44afee);
					}
				}
			}
			
		}
	}
	
</style>
